import React from 'react';
import {inject, observer} from 'mobx-react';
import {Button, Checkbox} from 'antd';

@inject('portalLoginStore')
@observer
class E9Form extends React.Component {
    constructor(props) {
        super(props);
        this.getLoginForm = this.getLoginForm.bind(this);
        this.onLabelClick = this.onLabelClick.bind(this);
        this.onInputChange = this.onInputChange.bind(this);
        this.onLogin = this.onLogin.bind(this);
    }

    componentDidMount() {
        const {portalLoginStore} = this.props;
        const {state = {}} = portalLoginStore;
        const {cacheAccount: loginId, langId} = state;
        portalLoginStore.getLoginForm({loginId, langId});
    }

    componentDidUpdate() {
        const _this = this;
        jQuery('.e9login-form-input').unbind().keydown(function (e) {
            e = e || window.event;
            const key = e.keyCode || e.which || e.charCode;
            if (key == 13) {
                const inputs = jQuery('.e9login-form-input');
                const idx = inputs.index(this);
                const nxtIdx = idx + 1;
                const nxtInput = jQuery('.e9login-form-input:eq(' + nxtIdx + ')');
                if (nxtInput.length > 0) {
                    nxtInput.focus();
                } else {
                    _this.onLogin();
                }
            }
        });
    }

    render() {
        const {portalLoginStore} = this.props;
        const {labelObj, state, onPasswordForget, onRememberChange, onValidateCodeChange} = portalLoginStore;
        const {
            isLogging,
            isRememberPW,
            isRememberAccount,
            isRememberPassword,
            cacheAccount,
            cachePassword,
            langId,
            loginSettingInfo = {},
            loginFormItems,
            loginFormHiddenItems,
            loginSetting = {},
            validateCode,
        } = state;
        const {loginForm = {}} = loginSettingInfo;
        const {color, backgroundColor} = loginForm;
        const {needforgotpassword, validateCodeKey = ''} = loginSetting;
        const validateCodeSrc = validateCode + '&validateCodeKey=' + validateCodeKey;

        return (
            <div className="e9login-form">
                {
                    loginFormItems.map((item, index) => {
                        let defaultValue = '';
                        if (item.atype == 'account') {
                            defaultValue = cacheAccount;
                        } else if (item.atype == 'password') {
                            defaultValue = cachePassword;
                        }

                        let itemComp = (
                            <div key={index} className="e9login-form-item" style={{color, borderBottom: `1px solid ${color}`}}>
                                <i className={`wevicon-e9login-${item.atype == 'account' ? 'account' : 'password'}`}/>
                                <label className={`e9login-form-label ${defaultValue ? 'e9login-display-hidden' : ''}`} onClick={this.onLabelClick}>{item.label}</label>
                                <input type={item.type} id={item.id} name={item.name} autoComplete="off" className="e9login-form-input" defaultValue={defaultValue} onBlur={e => item.atype == 'account' && this.getLoginForm()} onChange={this.onInputChange}/>
                            </div>
                        );

                        if (item.atype == 'validatecode') {
                            itemComp = (
                                <div key={index} className="e9login-form-item" style={{color, borderBottom: 'none'}}>
                                    <label className="e9login-form-label e9login-form-label-vc" onClick={this.onLabelClick}>{item.label}</label>
                                    <input type={item.type} id={item.id} name={item.name} className="e9login-form-input e9login-form-input-vc" style={{border: `1px solid ${color}`}} onChange={this.onInputChange}/>
                                    <div className="e9login-form-vc-img">
                                        <img src={validateCodeSrc} alt="" onClick={onValidateCodeChange}/>
                                    </div>
                                </div>
                            );
                        }

                        return itemComp;
                    })
                }
                {
                    loginFormHiddenItems.map((item, index) => {
                        return <div key={index} style={{display: 'none'}} dangerouslySetInnerHTML={{__html: item.html}}></div>;
                    })
                }
                <div className="e9login-form-remember" style={{color}}>
                    {
                        needforgotpassword == '1' && (
                            <div className="e9login-form-remember-forget" title={labelObj.forgetPassword}>
                                <span onClick={() => onPasswordForget()}>{labelObj.forgetPassword}</span>
                            </div>
                        )
                    }
                    <div className={`e9login-form-remember-content ${isRememberPW == '1' ? '' : 'e9login-display-hidden'}`}>
                        <div className={`e9login-form-remember-account`} title={labelObj.rememberAccount}>
                            <Checkbox checked={isRememberAccount} onChange={(e) => onRememberChange('account', e.target.checked)}>{labelObj.rememberAccount}</Checkbox>
                        </div>
                        <div className={`e9login-form-remember-password`} title={labelObj.rememberPassword}>
                            <Checkbox checked={isRememberPassword} onChange={(e) => onRememberChange('password', e.target.checked)}>{labelObj.rememberPassword}</Checkbox>
                        </div>
                    </div>
                    <div className="e9login-form-clear"></div>
                </div>
                <div className="e9login-form-submit">
                    <Button type="primary" loading={isLogging} id="submit" name="submit" className="e9login-form-submit-btn" style={{color, backgroundColor}} onClick={this.onLogin}>
                        {labelObj.login}
                    </Button>
                </div>
            </div>
        )
    }

    getLoginForm() {
        const {portalLoginStore} = this.props;
        portalLoginStore.getLoginForm();
    }

    onLabelClick(e) {
        jQuery(e.target.parentNode).find('input').focus();
    }

    onInputChange(e) {
        if (e.target.value) {
            jQuery(e.target.parentNode).find('.e9login-form-label').addClass('e9login-display-hidden');
        } else {
            jQuery(e.target.parentNode).find('.e9login-form-label').removeClass('e9login-display-hidden');
        }
    }

    onLogin() {
        const {portalLoginStore} = this.props;
        portalLoginStore.onLogin();
    }
}

export default E9Form;